<template>
  <div class="order_page">
    <div class="title">
      <img src="@/assets/img/back.png" alt="" @click="back">
      <div class="text">查询订单</div>
    </div>
    <!-- <div class="search_area">
      <van-field
        v-model="phone_number"
        label="手机号码"
        placeholder="输入您的手机号码"
        label-align="top"
        style="padding: 0;margin-right: 20px;"
      />
      <van-button type="primary" @click="search" style="width: 94px;padding: 5px;">立即查询</van-button>
    </div> -->
    <div class="content_area">
      <div class="content_item" v-for="item in listData">
        <div class="logo">
          <img :src="item.image" alt="">
        </div>
        <div class="order">
          <div class="app_name">{{ item.appName }}</div>
          <div class="order_code">订单号：{{ item.outTradeNo }}</div>
          <div class="order_buy">
            <span class="order_price">订单金额：{{ item.order_price }}</span>
            <!-- <span class="order_num">购买数量：{{ item.order_num }}</span> -->
          </div>
          <div class="pay_way">支付方式：{{ item.payType }}</div>
          <div class="create_time">订单创建时间：{{ item.orderCreateTime }}</div>
          <div class="pay_time">付款时间：{{ item.orderPayTime }}</div>
          <van-button class="install" @click="install(item.plistUrl )" v-if="item.status == 2">安装</van-button>
          <van-tag type="primary" plain v-if="item.status == 1" size="large">处理中</van-tag>
        </div>
      </div>
    </div>
    <div class="seek_order kefu" @click="kefu">
      <img src="@/assets/img/kefu.png" alt="">
      <div>客服</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Request from '@/utils/axios';
import { showLoadingToast, closeToast, showNotify, showToast } from 'vant';
import {ref,onMounted} from 'vue'
import { useRouter } from 'vue-router';
const router = useRouter()
let phone_number = ref('')
const listData = ref<any[]>([])
  
const install = (plistUrl :string) => {
  let url = `https://${window.location.hostname}/h5/download.html?plist=${plistUrl}`
  window.open(url,'_blank')
}

const search = () => {
  // var phoneReg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
  // if (phone_number.value.trim() == "") {
  //   showNotify({ type: 'danger', message: '请填写您的手机号', duration: 1500 });
  //   return;
  // }
  // if (!phoneReg.test(phone_number.value)) {
  //   showNotify({ type: 'danger', message: '请填写正确格式的手机号', duration: 1500 });
  //   return;
  // }
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  Request.get(`/user/goods?page=1&size=99999&goodsPid=0&phone=${phone_number.value}`,).then((res:any) => {
    if (res.code == 0) {
      listData.value = res.data.items
      console.log(listData.value);
      closeToast()
      if (listData.value.length == 0) {
        showToast('暂无数据')
      }
    }
  })
}

const back = () => {
  router.push('/goods')
}

const kefu = () => {
  window.open('https://work.weixin.qq.com/kfid/kfcc29d7dfa36a355f6','_blank')
}

onMounted(() => {
  search()
})
</script>

<style lang="less">
.order_page {
  // width: 100%;
  height: 100%;
  padding: 0 4.8%;
  .title {
    display: flex;
    height: 40px;
    align-items: center;
    position: relative;
    .text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      color: #333;
      font-weight: 500;
    }
    img {
      width: 20px;
      height: 20px;
    }
  }
  .search_area {
    margin-top: 15px;
    display: flex;
    align-items: flex-end;
  }
  .content_area {
    padding-bottom: 15px;
    .content_item {
      display: flex;
      margin-top: 20px;
      .logo {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        img {
          width: 50px;
          height: 50px;
          border-radius: 8px;
        }
      }
      .order {
        .app_name {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          margin-bottom: 5px;
        }
        .order_code,
        .order_buy,
        .pay_way,
        .create_time,
        .pay_time {
          font-size: 12px;
          color: #666;
        }
        .order_price {
          margin-right: 10px;
        }
        .install {
          margin-top: 8px;
          width: 72px;
          height: 28px;
          color: #FFF;
          background: #FF8800;
          border-radius: 20px;
        }
        .van-tag {
          margin-top: 8px;
        }
      }
    }
  }
  .seek_order {
      width: 50px;
      height: 50px;
      border-radius: 15px;
      background: linear-gradient(#6ac2fe,#4089f8);
      font-size: 13px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow:0 0 5px 0 #4089f8;
      position: fixed;
      right: 4.8%;
      bottom: 20px;
      img {
        width: 17px;
        height: 17px;
      }
    }
}
</style>